<template>
  <div class="cephalosome">
    <!-- 大屏 -->
    <dv-full-screen-container class="esord">
      <!-- 头部标题 -->
      <div class="header">
        <img src="@/assets/img/head.png" style="width: 100%; height: 3.2rem" />
        <!-- 年月日 时间 星期 -->
        <div class="heder_time">
          {{ nowDate + " " + nowTime + " " + nowWeek }}
        </div>
        <!-- 数字资产 -->
        <div class="header_asset" @click="balance">
          <img
            src="@/assets/img/header_waveline.png"
            style="width: 23px; height: 15px; padding-right: 8px"
          />
          <img
            src="@/assets/img/header_property.png"
            style="width: 23px; height: 18px; padding-right: 8px"
          />
          <span>数字资产</span>
          <img
            src="@/assets/img/header_waveline.png"
            style="width: 23px; height: 15px; padding-left: 8px"
          />
        </div>
      </div>
      <!-- 内容 -->
      <div class="large-size">
        <!-- 视频 -->
        <div class="large_screen">
          <div class="screen_play">
            <div class="screen_go" @click="clickgoreturn">返回</div>
            <video
              class="screen_video"
              src="video/工程2.mp4"
              controls
              poster="/video/img_cover.png"
              autoplay
            ></video>
          </div>
        </div>
        <!-- 云台控制 -->
        <div class="large_tripod">
          <!-- 导航 -->
          <div class="tripod_header">
            <img src="../assets/img/video_copy.png" alt="" />
            <div>云台控制</div>
          </div>
          <!-- 圆盘 -->

          <div class="tripod_content">
            <div class="tripod_circle">
              <div class="tripod_disk">
                <div class="disk_left">左</div>
                <div class="disk_top">上</div>
                <div class="disk_concent"></div>
                <div class="disk_right">右</div>
                <div class="disk_bottom">下</div>
              </div>
            </div>
          </div>
          <!-- 控制台 -->
          <div class="tripod_chanve">
            <div class="tripod_symbol">
              <span>变倍:</span>
              <span
                ><img
                  src="../assets/img/tripod_plus.png"
                  style="width: 2.5rem; height: 2.5rem"
              /></span>
              <span
                ><img
                  src="../assets/img/tripod_subtract.png"
                  style="width: 2.5rem; height: 2.5rem"
              /></span>
            </div>
            <div class="tripod_symbol">
              <span>光圈:</span>
              <span
                ><img
                  src="../assets/img/tripod_plus.png"
                  style="width: 2.5rem; height: 2.5rem"
              /></span>
              <span
                ><img
                  src="../assets/img/tripod_subtract.png"
                  style="width: 2.5rem; height: 2.5rem"
              /></span>
            </div>
            <div class="tripod_symbol">
              <span>聚焦:</span>
              <span
                ><img
                  src="../assets/img/tripod_plus.png"
                  style="width: 2.5rem; height: 2.5rem"
              /></span>
              <span
                ><img
                  src="../assets/img/tripod_subtract.png"
                  style="width: 2.5rem; height: 2.5rem"
              /></span>
            </div>
            <div class="tripod_symbol">
              <span>景深:</span>
              <span
                ><img
                  src="../assets/img/tripod_plus.png"
                  style="width: 2.5rem; height: 2.5rem"
              /></span>
              <span
                ><img
                  src="../assets/img/tripod_subtract.png"
                  style="width: 2.5rem; height: 2.5rem"
              /></span>
            </div>
          </div>
        </div>
        <!-- 异常情况 -->
        <div class="large_abnormal">
          <!-- 导航 -->
          <div class="abnormal_header">
            <img src="../assets/img/video_copy.png" />
            <div>异常情况</div>
          </div>
          <!-- 违规 -->
          <div class="abnormal_getout">
            <div class="abnormal_time">
              <img
                src="../assets/img/time_aggregate.png"
                style="width: 3rem; height: 3rem"
              />
              <div class="abnormal_text">
                <span>总计违规</span>
                <span>73 <span class="spanone">次</span></span>
              </div>
            </div>
            <div class="abnormal_time">
              <img
                src="../assets/img/time_smoking.png"
                style="width: 3rem; height: 3rem"
              />
              <div class="abnormal_text">
                <span>抽烟违规</span>
                <span>17 <span class="spanone">次</span></span>
              </div>
            </div>
            <div class="abnormal_time">
              <img
                src="../assets/img/time_helmet.png"
                style="width: 3rem; height: 3rem"
              />
              <div class="abnormal_text">
                <span>安全帽违规</span>
                <span>21 <span class="spanone">次</span></span>
              </div>
            </div>
            <div class="abnormal_time">
              <img
                src="../assets/img/time_phone.png"
                style="width: 3rem; height: 3rem"
              />
              <div class="abnormal_text">
                <span>打电话违规</span>
                <span>35 <span class="spanone">次</span></span>
              </div>
            </div>
          </div>
          <!-- 列表 -->
          <div class="abnormal_list">
            <dv-scroll-board
              @click="onClickScrollBoard"
              :config="config"
              style="width: 24.5rem; height: 16rem"
            />
          </div>
        </div>
        <!-- <div class="large_tripod"></div> -->
      </div>
      <!-- 报警信息------弹框 -->
      <!-- 抽烟违规 -->
      <!-- <div class="fullscreen" v-if="popup_smoking">
        <div class="popup">
          <div class="popup_header">
            <div>
              <img src="../assets/img/hrade_frame.png" />
              <div>违规信息</div>
            </div>
            <div @click="onClickpopup">
              <img
                src="../assets/img/popup_close.png"
                style="width: 3.5rem; height: 3.5rem"
              />
            </div>
          </div>
          <div class="popup_video">
            <div class="videos">
              <div class="videos_os">违规视频</div>
              <div class="videos_illegal">
                <video
                  src="video/工程1.mp4"
                  controls
                  width="100%"
                  height="100%"
                  poster="/video/img_cover.png"
                  autoplay
                ></video>
              </div>
            </div>
            <div class="videos">
              <div class="videos_os">抓拍照片</div>
              <div class="videos_imgsrc">
                <img
                  src="../assets/img/popup_smoking.png"
                  style="width: 25rem; height: 13rem"
                />
              </div>
            </div>
          </div>
          <div class="popup_button">视频识别结果:抽烟违规</div>
        </div>
      </div> -->
      <!-- 安全帽违规 -->
      <div class="fullscreen" v-if="popup_helmet">
        <div class="popup">
          <div class="popup_header">
            <div>
              <img src="../assets/img/hrade_frame.png" />
              <div>违规信息</div>
            </div>
            <div @click="onClickpopup">
              <img
                src="../assets/img/popup_close.png"
                style="width: 3.5rem; height: 3.5rem"
              />
            </div>
          </div>
          <div class="popup_video">
            <div class="videos">
              <div class="videos_os">违规视频</div>
              <div class="videos_illegal">
                <video
                  src="video/工程2.mp4"
                  controls
                  width="100%"
                  height="100%"
                  poster="/video/img_cover.png"
                  autoplay
                ></video>
              </div>
            </div>
            <div class="videos">
              <div class="videos_os">抓拍照片</div>
              <div class="videos_imgsrc">
                <img
                  src="../assets/img/popup_helmet.png"
                  style="width: 25rem; height: 13rem"
                />
              </div>
            </div>
          </div>
          <div class="popup_button">视频识别结果:安全帽违规</div>
        </div>
      </div>
      <!-- 玩手机违规 -->
      <!-- <div class="fullscreen" v-if="popup_playphone">
        <div class="popup">
          <div class="popup_header">
            <div>
              <img src="../assets/img/hrade_frame.png" />
              <div>违规信息</div>
            </div>
            <div @click="onClickpopup">
              <img
                src="../assets/img/popup_close.png"
                style="width: 3.5rem; height: 3.5rem"
              />
            </div>
          </div>
          <div class="popup_video">
            <div class="videos">
              <div class="videos_os">违规视频</div>
              <div class="videos_illegal">
                <video
                  src="video/违章视频.mp4"
                  controls
                  width="100%"
                  height="100%"
                  poster="/video/img_cover.png"
                  autoplay
                ></video>
              </div>
            </div>
            <div class="videos">
              <div class="videos_os">抓拍照片</div>
              <div class="videos_imgsrc">
                <img
                  src="../assets/img/popup_violator.png"
                  style="width: 25rem; height: 13rem"
                />
              </div>
            </div>
          </div>
          <div class="popup_button">视频识别结果:玩手机违规</div>
        </div>
      </div> -->
      <!-- 打电话违规 -->
      <!-- <div class="fullscreen" v-if="popup_ringup">
        <div class="popup">
          <div class="popup_header">
            <div>
              <img src="../assets/img/hrade_frame.png" />
              <div>违规信息</div>
            </div>
            <div @click="onClickpopup">
              <img
                src="../assets/img/popup_close.png"
                style="width: 3.5rem; height: 3.5rem"
              />
            </div>
          </div>
          <div class="popup_video">
            <div class="videos">
              <div class="videos_os">违规视频</div>
              <div class="videos_illegal">
                <video
                  src="video/工程3.mp4"
                  controls
                  width="100%"
                  height="100%"
                  poster="/video/img_cover.png"
                  autoplay
                ></video>
              </div>
            </div>
            <div class="videos">
              <div class="videos_os">抓拍照片</div>
              <div class="videos_imgsrc">
                <img
                  src="../assets/img/popup_phone.png"
                  style="width: 25rem; height: 13rem"
                />
              </div>
            </div>
          </div>
          <div class="popup_button">视频识别结果:打电话违规</div>
        </div>
      </div> -->
    </dv-full-screen-container>
  </div>
</template>

<script>
import videojs from "video.js";
// import "videojs-contrib-hls";
export default {
  data() {
    return {
      popup_smoking: false, //抽烟违规
      popup_helmet: false, //安全帽违规
      popup_playphone: false, //玩手机违规
      popup_ringup: false, //打电话违规
      timeInterval: null, // 定时刷新函数 计时
      nowDate: "", // 当前日期
      nowTime: "", // 当前时间
      nowWeek: "", // 当前星期
      videoUrl:
        "https://cloud.video.taobao.com/play/u/2835558751/p/2/e/6/t/1/293619015431.mp4",
      config: {
        headerBGC: "#od2b35",
        waitTime: 2000,
        rowNum: 5,
        header: ["告警信息", "告警时间", "操作"],
        data: [
          [
            '<span style="color:#fff;font-size:0.8rem">安全帽违规</span>',
            '<span style="display: block;color:#FFF000;font-size:0.8rem;margin-left: -10px;">09-07 9:47:15</span>',
            '<span style="color:#3FEED9  ;font-size:0.8rem" >查看视频</span>',
          ],
          [
            '<span style="color:#fff;font-size:0.8rem">安全帽违规</span>',
            '<span style="display: block;color:#FFF000;font-size:0.8rem;margin-left: -10px;">09-07 9:47:15</span>',
            '<span style="color:#3FEED9  ;font-size:0.8rem" >查看视频</span>',
          ],
          [
            '<span style="color:#fff;font-size:0.8rem">安全帽违规</span>',
            '<span style="display: block;color:#FFF000;font-size:0.8rem;margin-left: -10px;">09-07 9:47:15</span>',
            '<span style="color:#3FEED9  ;font-size:0.8rem" >查看视频</span>',
          ],
          [
            '<span style="color:#fff;font-size:0.8rem">安全帽违规</span>',
            '<span style="display: block;color:#FFF000;font-size:0.8rem;margin-left: -10px;">09-07 9:47:15</span>',
            '<span style="color:#3FEED9  ;font-size:0.8rem" >查看视频</span>',
          ],
          [
            '<span style="color:#fff;font-size:0.8rem">安全帽违规</span>',
            '<span style="display: block;color:#FFF000;font-size:0.8rem;margin-left: -10px;">09-07 9:47:15</span>',
            '<span style="color:#3FEED9  ;font-size:0.8rem" >查看视频</span>',
          ],
          [
            '<span style="color:#fff;font-size:0.8rem">安全帽违规</span>',
            '<span style="display: block;color:#FFF000;font-size:0.8rem;margin-left: -10px;">09-07 9:47:15</span>',
            '<span style="color:#3FEED9  ;font-size:0.8rem" >查看视频</span>',
          ],
          [
            '<span style="color:#fff;font-size:0.8rem">安全帽违规</span>',
            '<span style="display: block;color:#FFF000;font-size:0.8rem;margin-left: -10px;">09-07 9:47:15</span>',
            '<span style="color:#3FEED9  ;font-size:0.8rem" >查看视频</span>',
          ],
          [
            '<span style="color:#fff;font-size:0.8rem">安全帽违规</span>',
            '<span style="display: block;color:#FFF000;font-size:0.8rem;margin-left: -10px;">09-07 9:47:15</span>',
            '<span style="color:#3FEED9  ;font-size:0.8rem" >查看视频</span>',
          ],
          [
            '<span style="color:#fff;font-size:0.8rem">安全帽违规</span>',
            '<span style="display: block;color:#FFF000;font-size:0.8rem;margin-left: -10px;">09-07 9:47:15</span>',
            '<span style="color:#3FEED9  ;font-size:0.8rem" >查看视频</span>',
          ],
          [
            '<span style="color:#fff;font-size:0.8rem">安全帽违规</span>',
            '<span style="display: block;color:#FFF000;font-size:0.8rem;margin-left: -10px;">09-07 9:47:15</span>',
            '<span style="color:#3FEED9  ;font-size:0.8rem" >查看视频</span>',
          ],
        ],
      },
    };
  },
  computed: {},
  watch: {},

  methods: {
    // 点击导航返回上一页
    clickgoreturn() {
      this.$router.back();
    },
    // 点击查看视频
    onClickScrollBoard(obj) {
      console.log(obj);
      if (obj.columnIndex == 2 && obj.rowIndex == 0) {
        this.popup_helmet = true;
      } else if (obj.columnIndex == 2 && obj.rowIndex == 1) {
        this.popup_helmet = true;
      } else if (obj.columnIndex == 2 && obj.rowIndex == 2) {
        this.popup_helmet = true;
      } else if (obj.columnIndex == 2 && obj.rowIndex == 3) {
        this.popup_helmet = true;
      } else if (obj.columnIndex == 2 && obj.rowIndex == 4) {
        this.popup_helmet = true;
      } else if (obj.columnIndex == 2 && obj.rowIndex == 5) {
        this.popup_helmet = true;
      } else if (obj.columnIndex == 2 && obj.rowIndex == 6) {
        this.popup_helmet = true;
      } else if (obj.columnIndex == 2 && obj.rowIndex == 7) {
        this.popup_helmet = true;
      } else if (obj.columnIndex == 2 && obj.rowIndex == 8) {
        this.popup_helmet = true;
      } else if (obj.columnIndex == 2 && obj.rowIndex == 9) {
        this.popup_helmet = true;
      } else if (obj.columnIndex == 2 && obj.rowIndex == 10) {
        this.popup_helmet = true;
      } else if (obj.columnIndex == 2 && obj.rowIndex == 11) {
        this.popup_helmet = true;
      }
    },
    // 点击关闭视频
    onClickpopup() {
      this.popup_helmet = false; //安全帽违规
    },
    /**
     * 当前系统时间 更新
     * @onIntervalTimeNow ====================  系统时间 每秒更新
     * @onGetTimeNow =========================  系统时间 格式转化及获取
     * */
    onIntervalTimeNow() {
      let that = this;
      that.timeInterval = setInterval(() => {
        that.onGetTimeNow();
      }, 1000);
    },
    // 时分秒
    onGetTimeNow() {
      var that = this;
      let yy = new Date().getFullYear();
      let mm = new Date().getMonth() + 1;
      let dd = new Date().getDate();
      let week = new Date().getDay();
      let hh = new Date().getHours();
      let mf =
        new Date().getMinutes() < 10
          ? "0" + new Date().getMinutes()
          : new Date().getMinutes();
      let ms =
        new Date().getSeconds() < 10
          ? "0" + new Date().getSeconds()
          : new Date().getSeconds();
      if (week == 1) {
        that.nowWeek = "星期一";
      } else if (week == 2) {
        that.nowWeek = "星期二";
      } else if (week == 3) {
        that.nowWeek = "星期三";
      } else if (week == 4) {
        that.nowWeek = "星期四";
      } else if (week == 5) {
        that.nowWeek = "星期五";
      } else if (week == 6) {
        that.nowWeek = "星期六";
      } else {
        that.nowWeek = "星期日";
      }
      that.nowTime = hh + ":" + mf + ":" + ms;
      that.nowDate = yy + "-" + mm + "-" + dd;
      // that.nowWeek = week;
      console.log(that.nowWeek);
    },
    // 点击数字资产
    balance() {
      window.open("https://amcas.linker.cc/cas/login");
    },
  },
  created() {},
  mounted() {
    this.onIntervalTimeNow();
    this.onGetTimeNow();
    videojs("my-video", function () {
      this.play();
    });
  },
  beforeDestroy() {
    let that = this;
    // 销毁计时器
    if (that.timeInterval) {
      clearInterval(that.timeInterval);
      that.timeInterval = null;
    }
  },
  components: {
    // VideoPlayer,
  },
};
</script>

<style  scoped>
@import "../assets/css/camera.css";
</style>
